<template>
	<div class="recommend">
		<!-- 轮播器插件 -->
		<scroll class="recommend-content" :data="discList">
			<div>
				<div class="wrapper">
			    <swiper :options="swiperOption" v-if="showRecommend">
			      <!-- slides -->
			      <swiper-slide v-for="(item,index) of recommends" :key="index">
			        <a :href="item.linkUrl" class="needsclick">
			        	<img class="swiper-img" :src="item.picUrl">
			        </a>
			      </swiper-slide>
			      <div class="swiper-pagination" slot="pagination"></div>
			    </swiper>
			  </div>  <!-- 轮播器插件结束 -->
				<div class="recommend-list">
					<h1 class="list-title">热门歌单推荐</h1>
					<ul>
						<li v-for="item in discList" class="item">
	            <div class="icon">
	              <img width="60" height="60" v-lazy="item.imgurl">
	            </div>
	            <div class="text">
	              <h2 class="name" v-html="item.creator.name"></h2>
	              <p class="desc" v-html="item.dissname"></p>
	            </div>
	          </li>
					</ul>
				</div>
			</div>	
			<div class="loading-container" v-show="!discList.length">
        <loading></loading>
      </div>
		</scroll>
	</div>
  
</template>
	
<script>
import Loading from 'base/loading/loading'
import Scroll from 'base/scroll/scroll'
import { getRecommend, getDiscList } from 'api/recommend'
import { ERR_OK } from 'api/config'
export default {
	components: {
		Scroll,
		Loading
	},
	data () {
		return {
			recommends: [],
			discList: [],
			swiperOption: {
        pagination: '.swiper-pagination',  //小圆点
        paginationClickable :true,    //小圆点切图
        autoplay : 3000,              //自动轮播
        autoplayDisableOnInteraction : false,  //操作后仍可自动轮播
        // prevButton:'.swiper-button-prev',   //上一张
        // nextButton:'.swiper-button-next',   //下一张
        loop: true                          //循环
      }
		}
	},
	computed: {
		showRecommend () {
			return this.recommends.length
		}
	},
	created () {
		this._gerRecommend()
		this._getDiscList()
	},
	methods: {
		_gerRecommend() {
			getRecommend().then((res) => {
				if (res.code === ERR_OK) {
					const data = res.data
					this.recommends = data.slider
				}
			})
		},
		_getDiscList() {
      getDiscList().then((res) => {
        if (res.code === ERR_OK) {
          this.discList = res.data.list
        }
      })
    }
	}
}
</script>

<style lang="stylus" scoped>
	@import "~common/stylus/variable"
	.wrapper >>> .swiper-pagination-bullet-active
		width: 20px
		border-radius: 5px
		background: #fff
	.recommend
		position: fixed
		width: 100%
		top: 88px
		bottom: 0
		.recommend-content
			height: 100%
			overflow: hidden
			.wrapper
				overflow: hidden
				width: 100%
				height: 0
				padding-bottom: 40%
				background: #eee
				.swiper-img
					width: 100%
			.recommend-list
				.list-title
					height: 65px
					line-height: 65px
					text-align: center
					font-size: $font-size-medium
					color: $color-theme
				.item
					display: flex
					box-sizing: border-box
					align-items: center
					padding: 0 20px 20px 20px
					.icon
						flex: 0 0 60px
						width: 60px
						padding-right: 20px
					.text
						display: flex
						flex-direction: column
						justify-content: center
						flex: 1
						line-height: 20px
						overflow: hidden
						font-size: $font-size-medium
						.name
							margin-bottom: 10px
							color: $color-text
						.desc
							color: $color-text-d
</style>
